<script setup>
import {ref} from 'vue'
//Vue Material Kit 2 components
import MaterialButton from '@/components/MaterialButton.vue'

let showDropdown = ref(false)
let showDropup = ref(false)
</script>
<template>
  <div class="container p-5 bg-gray-100 m-3">
    <div class="row d-flex justify-content-center">
      <div class="col-lg-4 col-md-6 col-sm-3">
        <div class="dropdown">
          <MaterialButton
            variant="gradient"
            color="success"
            class="dropdown-toggle"
            :class="{show: showDropdown}"
            @focusout="showDropdown = false"
            id="dropdownMenuButton"
            data-bs-toggle="dropdown"
            :area-expanded="showDropdown"
            @click="showDropdown = !showDropdown"
          >
            Dropdown button
          </MaterialButton>

          <ul class="dropdown-menu px-2 py-3" :class="{show: showDropdown}" aria-labelledby="dropdownMenuButton">
            <li>
              <a class="dropdown-item border-radius-md" href="javascript:;">Action</a>
            </li>
            <li>
              <a class="dropdown-item border-radius-md" href="javascript:;">Another action</a>
            </li>
            <li>
              <a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-3">
        <div class="btn-group dropup mt-7">
          <MaterialButton
            variant="gradient"
            color="success"
            class="dropdown-toggle"
            :class="{show: showDropup}"
            data-bs-toggle="dropdown"
            :area-expanded="showDropup"
            @focusout="showDropup = false"
            @click="showDropup = !showDropup"
          >
            Dropup
          </MaterialButton>
          <ul class="dropdown-menu px-2 py-3" :class="{show: showDropup}" aria-labelledby="dropdownMenuButton">
            <li>
              <a class="dropdown-item border-radius-md" href="javascript:;">Action</a>
            </li>
            <li>
              <a class="dropdown-item border-radius-md" href="javascript:;">Another action</a>
            </li>
            <li>
              <a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
